
<template>
  <el-dialog
    v-if="dialogVisible"
    :visible.sync="dialogVisible"
    destroy-on-close
    append-to-body
    width="350px"
    custom-class="user-pannel-dialog"
  >
    <template #title>
      <em-cell
        v-if="user"
        :title="userName"
        :size="size"
        :type="type"
        center
      >
        <template #label>
          UID:{{ user.id }}
        </template>
        <template #icon>
          <el-avatar
            :size="size"
            icon="el-icon-user-solid"
            :src="user.avatar"
          />
        </template>
      </em-cell>
    </template>
    <div>
      <em-grid
        :border="false"
        clickable
        square
      >
        <em-grid-item
          icon="em-icon-cash"
          text="积分记录"
          @click="onClickCredit"
        />
        <em-grid-item
          icon="em-icon-panel"
          text="订单历史"
        />
        <em-grid-item
          icon="em-icon-location-o"
          text="收件地址"
        />
        <em-grid-item
          icon="em-icon-countdown-o"
          text="浏览记录"
        />
      </em-grid>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'UserPannel',
  components: {},
  props: {
    value: {
      type: Boolean,
      default: false
    },
    user: {
      type: Object,
      default: null
    },
    size: {
      type: String,
      default: 'small'
    },
    type: {
      type: String,
      default: 'user'
    }
  },
  data() {
    return {}
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    },
    userName() {
      return (this.user && (this.user.username || this.user.nickname)) || '匿名用户'
    }
  },
  methods: {
    onClickCredit() {
      const { href } = this.$router.resolve({
        path: `/user/credit/index?uid=${this.user.id}`
      })
      window.open(href, '_blank')
    }
  }
}
</script>
<style lang="scss">
.user-pannel-dialog {
  .el-dialog__header {
    border-radius: inherit;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    background: #7abcff;
    background: -moz-linear-gradient(45deg, #7abcff 0%, #60abf8 44%, #4096ee 100%);
    background: -webkit-linear-gradient(45deg, #7abcff 0%, #60abf8 44%, #4096ee 100%);
    background: linear-gradient(45deg, #7abcff 0%, #60abf8 44%, #4096ee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=1 );
    .em-cell--user {
      background: transparent;
      padding: 0;
      color: #ebf5ff;
      .em-cell__label {
        color: #ebf5ff;
        opacity: 0.8;
      }
    }
    &btn {
      .el-dialog__close {
        color: #fff;
      }
    }
  }
  .el-dialog__body {
    padding: 15px;
  }
  .em-grid {
    &-item {
      &__text {
        color: inherit;
      }
      &__icon {
        font-size: 22px;
      }
      &:hover,
      &:focus {
        background-color: #ebf5ff;
        color: #5eadff;
      }
    }
  }
}
</style>
